<template>
  <div>
    <vi-header :header=headerData></vi-header>
    <!--头像部分-->
		<div>
	    <blur :blur-amount= 40 :url="url">
	      <p class="center"><img :src="url"></p>
	      <div class="paymentsCon">
	      	<h3>今日收支</h3>
	      	<h2>-807</h2>
	      	<span>今日被接任务：<b>380</b></span>
      	</div>
	    </blur>
  	</div>
  	
  	 <group>
      <cell is-link title='消息中心'>
        <img slot="icon" width="20" style="display:block;margin-right:5px;" src="">
        <badge text="1"></badge>
      </cell>
      <cell is-link title='我的推广'>
        <img slot="icon" width="20" style="display:block;margin-right:5px;" src="">
      </cell>
      <cell is-link title='收货地址管理'>
        <img slot="icon" width="20" style="display:block;margin-right:5px;" src="">
      </cell>
      <cell is-link title='帮助与反馈'>
        <img slot="icon" width="20" style="display:block;margin-right:5px;" src="">
      </cell>
      <cell is-link title='扫码收货'>
        <img slot="icon" width="20" style="display:block;margin-right:5px;" src="">
      </cell>
    </group>
  </div>
</template>

<script>
import viHeader from '../viHeader/viHeader'	
import { Blur,Cell,Group,Badge} from 'vux'

export default {
	components: {
  	viHeader,
  	Blur,
  	Cell,
  	Group,
  	Badge
	},
	data:function(){
		return {
			headerData:'个人中心',
      url: 'https://o3e85j0cv.qnssl.com/hot-chocolate-1068703__340.jpg'
		}
	}
}
</script>

<style scoped lang="less">
.center {
  text-align: center;
  padding-top:1rem;
  color: #fff;
  font-size:1.8rem;
}
.center img {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 4px solid #ececec;
}

.paymentsCon{
	 text-align: center;
	 color:#4c0400;
	 padding-top:0.5rem;
}

.paymentsCon{
	 h2{
	 		width: 8rem;
	    height: 2.5rem;
	    background: #D5291F;
	    border-radius: 0.4rem;
	    margin: 0 auto;
	    color: #fff;
	 		font-size: 2.4rem;
	 		line-height: 1.3;
	 		position: relative;
	 		padding-right: 1rem;
	 }
	 
	  h2:after{
	  	content: " ";
	    display: inline-block;
	    height: 0.6rem;
	    width: 0.6rem;
	    border-width: 0.2rem 0.2rem 0 0;
	    border-color: #fff;
	    border-style: solid;
	    -webkit-transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
	    transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
	    position: absolute;
	    top:1rem;
	    right:1rem;
	 	}
	 		
	 h3{
	 		font-size: 1.8rem;
	 		line-height: 1.5;
	 }
	 b{
	 	font-size: 1.6rem;
	 	font-weight: normal;
	 }
}

.weui-cells,vux-label{
	font-size:1.8rem !important;
}

</style>
